<!--
 * @Author: zhangjingyu
 * @Date: 2020-12-07 17:44:54
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2020-12-11 11:35:36
 * @FilePath: \vprisk-weifuwu\src\views\SystemMange\tenantManage.vue
 * @Description: 租户管理
-->
<template>
  <div>
    <upper-template noSearchButton>
      <div slot="buttonArea">
        <el-button @click="addFunc">新增</el-button>
        <el-button @click="editFunc">编辑</el-button>
        <el-button @click="delFunc">删除</el-button>
        <el-button @click="AuthorizedEng">授权工程</el-button>
        <el-button @click="AuthorizUser">授权用户</el-button>
      </div>
      <div slot="searchArea">
        <onlyOneSearch
          v-model="searchForm.projectName"
          placeholder="请输入租户名"
          :search-method="searchFunc"
        ></onlyOneSearch>
      </div>
      <div slot="columnHide">
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="item in textData"
            :label="item.label"
            :key="item.prop"
            >{{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </upper-template>
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      @row-click="rowClick"
    >
      <el-table-column
        width="55"
        type="selection"
        fixed="left"
      ></el-table-column>
      <el-table-column
        prop="tenantName"
        label="租户名称"
        align="center"
        v-if="tablePick[0]"
      >
      </el-table-column>
      <el-table-column
        prop="orgName"
        label="机构"
        align="center"
        sortable
        v-if="tablePick[1]"
      >
      </el-table-column>
      <el-table-column
        prop="projects"
        label="授权工程"
        sortable
        v-if="tablePick[2]"
      >
      </el-table-column>

      <el-table-column
        prop="users"
        label="授权用户"
        sortable
        v-if="tablePick[3]"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label="锁定状态"
        sortable
        v-if="tablePick[4]"
      >
      </el-table-column>
    </el-table>
    <pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchForm.page"
      :page-size="searchForm.size"
      :total="total"
    ></pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkList: ["租户名称","机构","授权工程","授权用户",],
      tableData:[
          {tenantName:"张三",orgName:"泛鹏",projets:"pro1,pro2,pro3",users:"李四"},
          {tenantName:"张三",orgName:"泛鹏",projets:"pro1,pro2,pro3",users:"李四"},
          {tenantName:"张三",orgName:"泛鹏",projets:"pro1,pro2,pro3",users:"李四"},
          {tenantName:"张三",orgName:"泛鹏",projets:"pro1,pro2,pro3",users:"李四"},
          {tenantName:"张三",orgName:"泛鹏",projets:"pro1,pro2,pro3",users:"李四"},
          {tenantName:"张三",orgName:"泛鹏",projets:"pro1,pro2,pro3",users:"李四"},
          {tenantName:"张三",orgName:"泛鹏",projets:"pro1,pro2,pro3",users:"李四"},
      ],
      textData:[
          {prop:"tenantName",label:"租户名称"},
          {prop:"orgName",label:"机构"},
          {prop:"projects",label:"授权工程"},
          {prop:"users",label:"授权用户"},
      ],
      searchForm: {},
      total:1,
      saveForm: {},
    };
  },
  created() {},
  computed: {
    tablePick() {
      return this.$tableDataPick(this.checkList, this.textData);
    },
  },
  methods: {
    searchFunc() {},
    clearFunc() {
      for (const key in this.searchForm) {
        this.searchForm[key] = "";
      }
      this.searchForm.page = 1;
      this.searchForm.size = 15;
    },
    rowClick(row) {
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
      }
      this.$refs.multipleTable.toggleRowSelection(row, true);
    },
    addFunc() {
      this.saveFlg = 1;
      for (let k in this.saveForm) {
        this.saveForm[k] = "";
      }
      this.addOrEdit = true;
    },
    editFunc() {
      this.saveFlg = 2;
      let selection = this.$refs.multipleTable.selection;
      if (selection.length != 1) {
        return this.$message.warning("请选择一条数据进行修改");
      }
      let row = selection[0];
      let form = { ...row };
      this.saveForm = form;
      this.addOrEdit = true;
    },
    delFunc() {
      let selection = this.$refs.multipleTable.selection;
      if (selection.length < 1) {
        return this.$message.warning("请选择要删除的数据");
      }
      this.$confirm("你确定要删除选中数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message.success("删除成功");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 授权工程
    AuthorizedEng() {},
    // 授权用户
    AuthorizUser() {},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>